<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增课程')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-lesson-add">
            <div class="form-group">
                <label class="col-sm-3 control-label">课程名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">课程介绍：</label>
                <div class="col-sm-8">
                    <textarea name="intro" class="form-control" required></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">课程类型：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('lesson_type')}">
                        <input type="radio" th:id="${'type_' + dict.dictCode}" name="type" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'type_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group channel_setting">
                <label class="col-sm-3 control-label">渠道：</label>
                <div class="col-sm-8">
                    <select name="channel" class="form-control m-b" th:with="type=${@dict.getType('lesson_channel')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group channel_setting">
                <label class="col-sm-3 control-label">发放形式：</label>
                <div class="col-sm-8">
                    <label th:each="provideMethod:${provideMethods}" class="check-box">
                        <input name="provideMethod" type="checkbox" th:value="${provideMethod.id}" th:text="${provideMethod.name}" th:checked="${provideMethod.flag}" >
                    </label>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">课程原价(分)：</label>
                <div class="col-sm-8">
                    <input id="fee" name="fee" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否显示原价：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid"/>
                    <input type="checkbox" id="showOriginalPrice" >
                    <span></span>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">课程优惠价(分)：</label>
                <div class="col-sm-8">
                    <input name="discountFee" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">报名开始：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input id="regStartTime" name="regStartTime" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">报名结束：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input id="regEndTime" name="regEndTime" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">自动上架时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="autoDeployTime" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">自动下架时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="autoUndeployTime" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">常规标签：</label>
                <div class="col-sm-8">
                    <input name="normalTags" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">红火标签：</label>
                <div class="col-sm-8">
                    <input name="hotTags" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">限购名额：</label>
                <div class="col-sm-8">
                    <input name="capacity" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">分类归属：</label>
                <div class="col-sm-8">
                    <div style="border: 1px solid #ccc;">
                        <div th:each="tag:${tags}">
                            <label class="col-sm-1 control-label" th:text="${tag.name + ':'}"></label>
                           <label th:each="subtag:${tag.childrens}" class="check-box">
                              <input name="tag" type="checkbox" th:value="${subtag.id}" th:text="${subtag.name}" th:checked="${subtag.flag}" >
                           </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">板块归属：</label>
                <div class="col-sm-8">
                    <div style="border: 1px solid #ccc;padding: 10px;">
                        <label th:each="block:${blocks}" class="check-box">
                            <input name="block" type="checkbox" th:value="${block.id}" th:text="${block.name}" th:checked="${block.flag}" >
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">是否首页显示：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid"/>
                        <input type="checkbox" id="showMain" >
                        <span></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否首页显示：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid"/>
                    <input type="checkbox" id="recomMain" >
                    <span></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否测试课：</label>
                <div class="col-sm-8">
                    <label class="toggle-switch switch-solid"/>
                        <input type="checkbox" id="test" >
                        <span></span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">权重(0-10)：</label>
                <div class="col-sm-8">
                    <input name="weight" class="form-control" type="text" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "lesson/lesson"
        $("#form-lesson-add").validate({
            rules:{
        		fee:{
        			digits:true,
        			min: 0
        		},
        		discountFee:{
                    digits:true,
        			min: 0,
        			lte: '#fee'
        		},
        		regEndTime:{
                    after: '#regStartTime'
        		},
        		capacity:{
                    digits:true,
        			min: 1
        		},
        	},
        	messages: {
                fee: {
                    digits: '课程原价必须输入整数',
                    min: '课程原价不能小于0'
                },
        		discountFee: {
                    digits: '课程优惠价必须输入整数',
                    min: '课程优惠价不能小于0',
                    lte: '课程优惠价不能大于原价'
                },
                regEndTime: {
                    after: '注册结束时间必须大于开始时间'
                },
                capacity: {
                    digits: '限购名额必须输入数字',
                    min: '限购名额不能小于1'
                },
            },

            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                var data = $('#form-lesson-add').serializeArray()
                var showMain = $("input[id='showMain']").is(':checked') == true ? 1 : 0;
            	data.push({"name": "showMain", "value": showMain});

            	var recomMain = $("input[id='recomMain']").is(':checked') == true ? 1 : 0;
            	data.push({"name": "recomMain", "value": recomMain});

            	var showOriginalPrice = $("input[id='showOriginalPrice']").is(':checked') == true ? 1 : 0;
            	data.push({"name": "showOriginalPrice", "value": showOriginalPrice});

                var tagIds = $.form.selectCheckeds("tag");
	        	var blockIds = $.form.selectCheckeds("block");
	        	var provideMethodIds = $.form.selectCheckeds("provideMethod");
	        	data.push({"name": "tagIds", "value": tagIds});
	        	data.push({"name": "blockIds", "value": blockIds});
	        	data.push({"name": "provideMethodIds", "value": provideMethodIds});

                $.operate.save(prefix + "/add", data);
            }
        }

        $("input[name='regStartTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='regEndTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='autoDeployTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='type']").on('ifChecked', function(obj){
            var check = $(this).val();
            if(check==4){
               $('.channel_setting').show();
            }else{
               $('.channel_setting').hide();
            }
        });

        $("input[name='autoUndeployTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

    </script>
</body>
</html>